<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>退休倒计时</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="description" content="查看你离退休还有多久">
    <meta name="baidu-site-verification" content="Vji2IqRU2z" />
    <link rel=icon href="./seller/favicon.ico">
    <style>
        body {
            font-size: 100px;
        }
div,body,html{
    margin:0;
    padding: 0;
}
        button {
            border-radius: 3px;
            padding: .1rem .35rem;
            width: auto;
            background: transparent;
            box-shadow: none;
            border: 1px solid #c6c8ca;
            -webkit-appearance: none;
        }

        select {
            width: auto;
            border-radius: 3px;
            outline: none;
            border: 1px solid #c6c8ca;
            padding: 10px 20px;
            -webkit-appearance: none;
        }
        input{
            width: auto;
            border-radius: 3px;
            outline: none;
            border: 1px solid #c6c8ca;
            padding: 10px 20px;
            -webkit-appearance: none;
        }

        .container {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .container span {
            font-size: .16rem;
        }

        .clock span {
            font-size: .22rem;

        }

        .age {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .clock {
            display: none;
        }
    </style>
    <script type="text/javascript">
        !function () {
            var e = document.documentElement.clientWidth;
            e > 720 && (e = 720), document.documentElement.style.fontSize = e / 7.2 + "px"
        }();
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?ab6118acad75f27f1680f1aa8a3173f0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="container">
    <div class="age" id="age-warpper">
        <span>您的年龄：</span>

        <select id="sex" name="sex" style="margin-top: .08rem;">
            <option value="60" selected>男</option>
            <option value="55">女</option>
        </select>
        <input type="number" min="1" step="1" max="60" id="age" style="margin-top: .08rem;">
        <button type="button" id="confirm-age" style="margin-top: .08rem;">确 定</button>
    </div>
    <div class="clock" id="clock-warp">
        <div><span>距离退休您还有：</span></div>
        <div>
            <span id="clock"></span>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
    var Page = {
        age: 18,
        retire_age:60,
        init: function () {
            var that = this;
            var btnObj = document.getElementById("confirm-age");
            document.getElementById('age').focus();
            btnObj.onclick = function () {
                var a = document.getElementById('age').value*1;
                var ra = document.getElementById("sex").value*1;
                Page.retire_age = ra;
                Page.age = a;
                if(a>ra||a<1){
                    alert('请输入正确的年龄');
                    return false;
                }
                if(a===ra){
                    alert("您已达到退休的年龄");
                    return false;
                }
                document.getElementById('clock-warp').style['display'] = 'block';
                document.getElementById('age-warpper').style['display'] = 'none';

                that.clock();
            }
        },
        clock: function () {
            var today = new Date(),//当前时间
                h = today.getHours(),
                m = today.getMinutes(),
                s = today.getSeconds();
            y = today.getFullYear();
            toYear = Page.retire_age - Page.age + y;
            var stopTime = new Date("Feb 9 " + toYear + " 00:00:00"),//结束时间
                stopH = stopTime.getHours(),
                stopM = stopTime.getMinutes(),
                stopS = stopTime.getSeconds();
            var shenyu = stopTime.getTime() - today.getTime(),//倒计时毫秒数
                shengyuY = parseInt(shenyu / (365 * 60 * 60 * 24 * 1000)),//转换为天
                Y = parseInt(shenyu) - parseInt(shengyuY * 365 * 60 * 60 * 24 * 1000),//除去天的毫秒数
                shengyuD = parseInt(Y / (60 * 60 * 24 * 1000)),//转换为天
                D = parseInt(Y) - parseInt(shengyuD * 60 * 60 * 24 * 1000),//除去天的毫秒数
                shengyuH = parseInt(D / (60 * 60 * 1000)),//除去天的毫秒数转换成小时
                H = D - shengyuH * 60 * 60 * 1000,//除去天、小时的毫秒数
                shengyuM = parseInt(H / (60 * 1000)),//除去天的毫秒数转换成分钟
                M = H - shengyuM * 60 * 1000;//除去天、小时、分的毫秒数
            S = parseInt((shenyu - shengyuY * 365 * 60 * 60 * 24 * 1000 - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)//除去天、小时、分的毫秒数转化为秒
            document.getElementById("clock").innerHTML = (shengyuY + "年 " + shengyuD + "天" + shengyuH + "小时" + shengyuM + "分" + S + "秒" + "<br>");
            setTimeout(Page.clock, 1000);
        }
    };
    document.onload = function () {

        Page.init();
    }();
</script>
</html>